<template>
    <div class="container">
        <header>
            <nuxt-link to="/"><img src="~/static/image/logo_font.png" alt=""></nuxt-link> 
        </header>
        <div class="content">
            <div class="left">
                <h1>用服务</h1>
                <h3>让天下的生意更简单</h3>
            </div>
            <div class="right">
                <div class="title">
                    <h1>欢迎登录商家端</h1>
                    <h4>
                        <span>您还没有一起家具网账号？</span>
                        <nuxt-link to="/business/settlein">
                            <span style="color:#F30213">立即入驻</span>
                        </nuxt-link>
                    </h4>
                </div>
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline :show-message="true">
                    <FormItem prop="user_mobile" label="手机号">
                        <div class="item">
                            <Input maxlength="11" type="text" v-model="formInline.user_mobile" placeholder="请输入手机号码"></Input>
                        </div>
                    </FormItem>
                    <FormItem prop="code" label="动态码">
                        <div class="item identify">
                            <Input type="text" v-model="formInline.code" placeholder="请输入右侧动态码"></Input>
                            <!--验证码组件-->
                            <s-identify :identifyCode="identifyCode"></s-identify>
                            <img @click="refreshCode" src="~/static/image/ico/refresh.png" alt="">
                        </div>
                    </FormItem>
                    <FormItem prop="verifiy_code" label="验证码">
                        <div class="item code">
                            <Input type="text" suffix=" " v-model="formInline.verifiy_code" placeholder="请输入手机验证码"></Input>
                            <span v-show="show" @click="_getCode">获取验证码</span>
                            <span v-show="!show" class="count">{{count}} s</span>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button :loading="loading" type="error" @click="handleSubmit('formInline')">登录</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import SIdentify  from '~/components/Sidentify'
export default {
    components: {
		SIdentify
	},
    data(){
        const validateTel = (rule, value, callback) => {
            if(!(/^1[3456789]\d{9}$/.test(this.formInline.user_mobile))){ 
                callback(new Error('电话格式不正确'));
            } else{
                callback();   
            }
        }
        return{
            identifyCodes: "1234567890",
            identifyCode: "",
            show: true,
            count: '',
            timer: null,
            formInline: {
                user_mobile:'',
                verifiy_code:'',
                code:''
            },
            loading:false,
            ruleInline: {
                user_mobile: [
                    { required: true, message: '请输入您的电话', trigger: 'blur' },
					{ type: 'string', min: 7,message: '电话格式不正确', trigger: 'change' },
                    { required: true, validator:validateTel, trigger: 'change' }
                ],
				verifiy_code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入动态码', trigger: 'blur' }
                ],
            }
        }
    },
    created(){
        this.refreshCode()
    },
    computed:{
		...mapState(['address','userInfo'])
	},
    mounted(){
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
    },
    methods:{
        // 登录
		handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.identifyCode!=this.formInline.code) {
                        this.$Message.error('动态码不正确');
                        this.refreshCode()
                        return
                    }
                    this._submit()
                } else {
                    // this.$Message.error('Fail!');
                }
            })
        },
        async _submit(){
            this.loading = true
            let{data:{code,data,msg}} = await this.$http.post(this.$API.login,{
                user_mobile:this.formInline.user_mobile,
                type:2,
                verifiy_code:this.formInline.verifiy_code,
                platform:4
            })
            this.loading = false
            if (code==200) {
                this.$store.commit('ChangeGUserInfo',data.data);
                this.$router.push({path:'/business/settlein'})
            }else{
                this.$Message.error(msg);
            }
        },
        //验证码
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        },     
        refreshCode() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                    this.randomNum(0, this.identifyCodes.length)
                ];
            }
            console.log(this.identifyCode);
        },
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },1000)
            }
        },
        async _getCode(){
            let{data:{code,data,msg}} = await this.$http.post(this.$API.sendToSms,{
                mobile:this.formInline.user_mobile,
                platform:4,
                type:1
            })
            if (code==200) {
                this.getCode()
            }else{
                this.$Message.error(msg);
            }
        },
    },
}
</script>
<style scoped>
    .container{
        min-width:100%;
        min-height: 100vh;
        background: url(https://cdn.v1.17home.com/store-app/user/pc_login_banner.png)center/cover no-repeat;
    }
    .container header{
        padding: 68px 70px;
    }
    .container .content{
        display: flex;
        justify-content: space-between;
        padding: 0 198px;
    }
    .container .content .left h1{
        font-size: 55px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 54px;
        margin-top: 130px;
    }
    .container .content .left h3{
        font-size: 28px;
        color: #FFFFFF;
    }
    .container .content .right{
        width: 446px;
        height: 600px;
        background: #FFFFFF;
        opacity: 0.9;
        border-radius: 6px;
        padding: 74px 35px;
    }
    .container .content .right h1{
        font-size: 36px;
        font-weight: bold;
        color: #333333;
        line-height: 54px;
    }
    .container .content .right h4{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }
    .container .ivu-form-item{
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }
    .container .ivu-form-item>>>input{
        height: 40px;
    }
    .container>>>.ivu-form .ivu-form-item-label{
        width: calc(100% - 300px);
    }
    .container .ivu-form{
        margin-top: 70px;
    }
    .container .item{
        width: 300px;
        display: flex;
        align-items: center;
    }
    .container .identify>>>.ivu-input-wrapper{
        width: 160px;
    }
    .container .identify{
        justify-content: space-between;
    }
    .container .ivu-form-item-content button{
        width: 376px;
        height: 50px;
        background: #F30213;
        border-radius: 6px;
    }
    .container .code {
        justify-content: space-between;
    }
    .container .code .ivu-input-wrapper{
        width: calc(100% - 136px);
    }
    .container .code span{
        width: 126px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        cursor: pointer;
    }
</style>
